<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/Itcast.core.js"></script>
    <script src="./js/itcast.ctor.js"></script>
    <script src="./js/Itcast.dom.js"></script>
    <script>
        Itcast.fn.extend({

            on: function ( eventName, callback ) {
                // 遍历 this. 给每一个 dom 元素都绑定事件
                return this.each(function () {
                    this.addEventListener( eventName, callback );
                });

            }

        })
    </script>
</head>
<body>
    
</body>
<script>
     I( '<div style="width: 200px; height: 100px; border: 1px dashed blue; margin: 10px 0;"></div>' +
        '<div style="width: 200px; height: 100px; border: 1px dashed blue; margin: 10px 0;"></div>' + 
        '<div style="width: 200px; height: 100px; border: 1px dashed blue; margin: 10px 0;"></div>' +
        '<div style="width: 200px; height: 100px; border: 1px dashed blue; margin: 10px 0;"></div>' )
            .appendTo( 'body' )
            .on( 'mouseover', function () {
                this.style.backgroundColor = 'red';
                // $( this ).css()
            }).on( 'mouseout', function () {
                this.style.backgroundColor = '';
            });

</script>
</html>